oa.view.rf.fractionExtendAndReduce = {
/**
 * Render the structure of a fractionExtendAndReduce
 * 
 * @author Linda Eckardt
 * @param {ArithmeticProblemList} ap  A List of arithmetic problems.
 */
render: function(ap) {
  var el = {};
  var rB = document.getElementById("renderBox");
  var apDivEl = dom.createDiv("fractionExtendAndReduce");
  apDivEl.setAttribute("data-nmrofops", ap.type.operators.length);
  rB.appendChild(apDivEl);
  var boat = dom.createDiv("boatBox", "boatBox"),
      top = dom.createDiv("topBox", "overlayBox"),
      bottom = dom.createDiv("bottomBox");
  var btnWrapper;
  
  el = dom.createDiv(null, "largeBox");
  el.appendChild(boat);
  el.appendChild(top);
  el.appendChild(bottom);
  apDivEl.appendChild(el);
  
  // create the boat
  oa.view.buildTheBoat(boat);
  
  // create upper and lower boxes
  oa.view.fillLargeBoxesExtendAndReduce(ap);
    
  // configure the submit/continue button
  el = dom.createButton("submitButton", "blue", "?");
  el.addEventListener("click", oa.view.handleFractionExtendAndReduceSubmit, false);
  
  btnWrapper = dom.createDiv(null, "buttonRight");
  btnWrapper.appendChild( el);
  apDivEl.appendChild( btnWrapper);

  document.addEventListener("keypress", oa.view.handleKeyPressEvents, true);
  oa.view.waterAnimation();
},
/**
 * Fill an already rendered problem equation with new values for operands
 * 
 * @author Linda Eckardt
 * @param {ArithmeticProblem} ap An arithmetic problem.
 */
fill: function(ap) {
  // fill in the operands
  var passengers = document.getElementById("passengers");
  var op, man;
  var svgNum, svgDenom;
  for ( var i = 0; i < oa.view.fractionExtendAndReduceCountAll; i++) {
    op = ap.operands[i];
    
    // fractions
    svgNum = document.getElementById("numerator" +i),
    svgDenom = document.getElementById("denominator" +i);
    svgNum.textContent = op[0];
    svgNum.setAttributeNS(null, "x", 42 - (op[0] < 10 ? 10 : op[0] < 100 ? 20 : 30));
    svgDenom.textContent = op[1];
    svgDenom.setAttributeNS(null, "x", 42 - (op[1] < 10 ? 10 : op[1] < 100 ? 20 : 30));
    
    // remove happy stickmans
    man = document.getElementById("happyStickman"+i);
    if (man)
      passengers.removeChild(man);
  }
  
  // get the boat back
  setAttributes(document.getElementById("boatGroup"), [["transform", "translate(0,0)"], ["x", 0]]);
}
};

oa.view.fractionExtendAndReduceCountAll = 5;
oa.view.fractionExtendAndReduceCountCorrect = 3;
oa.view.waves = 6;

oa.view.buildTheBoat = function(boatDiv) {
  var xmlns = "http://www.w3.org/2000/svg";
  boatDiv.innerHTML=
    '<svg id="svgFractionBoat" version="1.1" width="600" height="300"'+
    'xmlns="'+xmlns+'">'+
    '<linearGradient id="grad_hull" x1="0%" y1="0%" x2="0%" y2="100%">'+
      '<stop offset="0%" style="stop-color:red;" />'+
      '<stop offset="100%" style="stop-color:rgb(50,0,0);" />'+
    '</linearGradient>'+
    '<linearGradient id="grad_sail" x1="0%" x2="100%" y1="0%" y2="100%">'+
      '<stop offset="0%" style="stop-color:gray;" />'+
      '<stop offset="75%" style="stop-color:white;" />'+
      '<stop offset="100%" style="stop-color:gray;" />'+
    '</linearGradient>'+
    '<linearGradient id="grad_mastV" x1="0%" y1="0%" x2="100%" y2="0%">'+
      '<stop offset="0%" style="stop-color:lightgreen;" />'+
      '<stop offset="40%" style="stop-color:lightgreen;" />'+
      '<stop offset="100%" style="stop-color:darkgreen;" />'+
    '</linearGradient>'+
    '<linearGradient id="grad_mastH" x1="0%" y1="0%" x2="0%" y2="100%">'+
      '<stop offset="0%" style="stop-color:gray;" />'+
      '<stop offset="40%" style="stop-color:lightgray;" />'+
      '<stop offset="100%" style="stop-color:black;" />'+
    '</linearGradient>'+
    '<linearGradient id="grad_water" x1="0%" y1="0%" x2="0%" y2="100%">'+
      '<stop offset="0%" style="stop-color:lightblue;stop-opacity:.5" />'+
      '<stop offset="100%" style="stop-color:lightblue;stop-opacity:1" />'+
    '</linearGradient>'+
    '</svg>';
  var svg = document.getElementById("svgFractionBoat");
  var width = svg.getAttribute("width"),
  height = svg.getAttribute("height"),
  padding = 10;
  
  var boatGroup = document.createElementNS(xmlns, "g");
  setAttributes(boatGroup, [["id", "boatGroup"], ["x", 0]]);
  svg.appendChild(boatGroup);
  
  var mastX = width / 2 + 50,
      hullY = .75*height + padding,
      hullIndent = 10,
      sailWidth = .25 * width,
      sailToHull = 20,
      hullRoundWidth = 200,
      hullHeight = 50;
  var flagWidth = .5*sailWidth;
  var flagHeight = .3*flagWidth;
  // mast vertical
  el = document.createElementNS(xmlns, "polygon");
  setAttributes(el, [["points", (mastX-2) +","+ padding +" "+ 
                                    mastX +","+ (hullY+hullIndent) +" "+ 
                                    (mastX-15) + "," + (hullY+hullIndent) +" "+ 
                                    (mastX-10) +","+ padding],
                     ["fill", "url(#grad_mastV)"]]);
  boatGroup.appendChild(el);
  
  //mast horizontal
  el = document.createElementNS(xmlns, "rect");
  setAttributes(el, [["x", mastX-10-sailWidth], ["y", hullY-sailToHull], 
                     ["width", sailWidth], ["height", 8], 
                     ["rx", 4], ["ry", 4], 
                     ["fill", "url(#grad_mastH)"]]);
  boatGroup.appendChild(el);
  
  // sail
  el = document.createElementNS(xmlns, "path");
  setAttributes(el, [["d", "M "+ (mastX-1) +" "+ (padding+10) +
                          " Q "+ (mastX+sailWidth/4) +" "+ (padding+.7*(hullY-sailToHull-padding)) +" "+ (mastX) +" "+ (hullY-sailToHull+5) +
                          " Q "+ (mastX-(sailWidth/2-30)) +" "+ (hullY-sailToHull-5) +" "+ (mastX-sailWidth+10) +" "+ (hullY-sailToHull+8) +
                          " Q "+ (mastX-(sailWidth/4)) +" "+ (padding+.66*(hullY-sailToHull-padding)) +" "+ (mastX-1) +" "+ (padding+10)], 
                     ["fill", "url(#grad_sail)"]]);
  boatGroup.appendChild(el);
  
  // flag
  el = document.createElementNS(xmlns, "path");
  setAttributes(el, [["d", "M "+ (mastX-10) +" "+ padding +
                          " Q "+ (mastX-15) +" "+ (padding+.7*flagHeight) +" "+ (mastX-10) +" "+ (padding+flagHeight)  +
                          " Q "+ (mastX-flagWidth/4) +" "+ (padding+flagHeight-flagHeight/6) +" "+ (mastX-flagWidth/2) +" "+ (padding+flagHeight) +
                          " Q "+ (mastX-.75*flagWidth) +" "+ (padding+flagHeight+flagHeight/6) +" "+ (mastX-flagWidth) +" "+ (padding+flagHeight) +
                          " Q "+ (mastX-.75*flagWidth) +" "+ (padding+.75*flagHeight+flagHeight/4) +" "+ (mastX-flagWidth/2) +" "+ (padding+flagHeight/2) +
                          " Q "+ (mastX-flagWidth/4) +" "+ padding +" "+ (mastX-10) +" "+ padding], 
                     ["fill", "url(#grad_hull)"]]);
  boatGroup.appendChild(el);
  
  el = document.createElementNS(xmlns, "g");
  setAttributes(el, [["id", "passengers"]]);
  boatGroup.appendChild(el);
  
  // hull
  el = document.createElementNS(xmlns, "path");
  setAttributes(el, [["d", "M "+ padding +" "+ hullY +
                          " Q "+ (padding+hullRoundWidth/2) +" "+ (hullY+hullHeight) +" "+ (padding+hullRoundWidth) +" "+ (hullY+hullHeight) +
                          " L "+ (width-hullRoundWidth-padding) +" "+ (hullY+hullHeight) +
                          " Q "+ (width-hullRoundWidth/2-padding) +" "+ (hullY+hullHeight) +" "+ (width-padding) +" "+ hullY +
                          " Q "+ (width/2) +" "+ (hullY+hullIndent) +" "+ padding +" "+ hullY], 
                     ["fill", "url(#grad_hull)"]]);
  boatGroup.appendChild(el);
  
  // water
  var waterGroup = document.createElementNS(xmlns, "g");
  setAttributes(waterGroup, [["id", "waterGroup"], ["x", 0]]);
  svg.appendChild(waterGroup);
  
  el = document.createElementNS(xmlns, "path");
  var waveStr = "",
      waveWidth = width / oa.view.waves;
  var waveHeight = waveWidth/8,
      waterSurface = (hullY+.4*hullHeight);
  for (var i = 0; i < oa.view.waves+1; i++)
    waveStr += " Q "+ (i*waveWidth-.75*waveWidth) +" "+ (waterSurface-waveHeight) +" "+ (i*waveWidth-waveWidth/2) +" "+ waterSurface +
               " Q "+ (i*waveWidth-waveWidth/4) +" "+ (waterSurface+waveHeight) +" "+ (i*waveWidth) +" "+ waterSurface;
  setAttributes(el, [["d", "M "+ (-waveWidth) +" "+ waterSurface +
                          waveStr +
                          " L "+ width +" "+ height +
                          " L "+ (-waveWidth) +" "+ height], 
                     ["fill", "url(#grad_water)"]]);
  waterGroup.appendChild(el);
};

addStickman = function(svg, x, y, id) {
  var xmlns = "http://www.w3.org/2000/svg";
  var factor = .7;
  // head
  var el = document.createElementNS(xmlns, "circle");
  setAttributes(el, [["cx", x], ["cy", y-150*factor], ["r", 18*factor]]);
  svg.appendChild(el);
  // paper
  el = document.createElementNS(xmlns, "rect");
  setAttributes(el, [["x", x-50*factor], ["y", y-135*factor], ["width", 100*factor], ["height", 110*factor], ["rx", 5*factor], ["ry", 5*factor], ["fill", "white"], ["stroke", "black"]]);
  svg.appendChild(el);
  // textfield num
  el = document.createElementNS(xmlns, "text");
  setAttributes(el, [["y", y-90*factor], ["fill", "black"], ["id", "numerator"+id]]);
  svg.appendChild(el);
  // fraction line
  el = document.createElementNS(xmlns, "rect");
  setAttributes(el, [["x", x-30*factor], ["y", y-80*factor], ["width", 60*factor], ["height", 2*factor], ["rx", 2*factor], ["ry", 2*factor], ["fill", "black"]]);
  svg.appendChild(el);
  // textfield denom
  el = document.createElementNS(xmlns, "text");
  setAttributes(el, [["y", y-33*factor], ["fill", "black"], ["id", "denominator"+id]]);
  svg.appendChild(el);
  // left hand
  el = document.createElementNS(xmlns, "ellipse");
  setAttributes(el, [["cx", x-51*factor], ["cy", y-105*factor], ["rx", 4*factor], ["ry", 8*factor]]);
  svg.appendChild(el);
  // right hand
  el = document.createElementNS(xmlns, "ellipse");
  setAttributes(el, [["cx", x+51*factor], ["cy", y-105*factor], ["rx", 4*factor], ["ry", 8*factor]]);
  svg.appendChild(el);
  // left leg
  el = document.createElementNS(xmlns, "path");
  setAttributes(el, [["d", "M "+ (x-30*factor) +" "+ (y-25*factor) +" L "+ (x-40*factor) +" "+ y +" L "+ (x-30*factor) +" "+ y +" L "+ (x-15*factor) +" "+ (y-25*factor)]]);
  svg.appendChild(el);
  // right leg
  el = document.createElementNS(xmlns, "path");
  setAttributes(el, [["d", "M "+ (x+30*factor) +" "+ (y-25*factor) +" L "+ (x+40*factor) +" "+ y +" L "+ (x+30*factor) +" "+ y +" L "+ (x+15*factor) +" "+ (y-25*factor)]]);
  svg.appendChild(el);
};

addHappyStickman = function(svg, x, y, id) {
  var xmlns = "http://www.w3.org/2000/svg";
  var factor = .7;
  // group
  var group = document.createElementNS(xmlns, "g");
  setAttributes(group, [["id", "happyStickman"+id]]);
  svg.appendChild(group);
  // head
  var el = document.createElementNS(xmlns, "circle");
  setAttributes(el, [["cx", x], ["cy", y-150*factor], ["r", 18*factor]]);
  group.appendChild(el);
  // body
  el = document.createElementNS(xmlns, "rect");
  setAttributes(el, [["x", x-5*factor], ["y", y-140*factor], ["width", 10*factor], ["height", 100*factor], ["rx", 2*factor], ["ry", 2*factor], ["fill", "black"]]);
  group.appendChild(el);
  // left arm
  el = document.createElementNS(xmlns, "path");
  setAttributes(el, [["d", "M "+ (x-5*factor) +" "+ (y-110*factor) +" L "+ (x-50*factor) +" "+ (y-150*factor) +" L "+ (x-56*factor) +" "+ (y-144*factor) +" L "+ (x-5*factor) +" "+ (y-100*factor)]]);
  group.appendChild(el);
  // right arm
  el = document.createElementNS(xmlns, "path");
  setAttributes(el, [["d", "M "+ (x+5*factor) +" "+ (y-110*factor) +" L "+ (x+50*factor) +" "+ (y-150*factor) +" L "+ (x+56*factor) +" "+ (y-144*factor) +" L "+ (x+5*factor) +" "+ (y-100*factor)]]);
  group.appendChild(el);
  // left leg
  el = document.createElementNS(xmlns, "path");
  setAttributes(el, [["d", "M "+ (x-5*factor) +" "+ (y-50*factor) +" L "+ (x-40*factor) +" "+ y +" L "+ (x-30*factor) +" "+ y +" L "+ (x+5*factor) +" "+ (y-50*factor)]]);
  group.appendChild(el);
  // right leg
  el = document.createElementNS(xmlns, "path");
  setAttributes(el, [["d", "M "+ (x+5*factor) +" "+ (y-50*factor) +" L "+ (x+40*factor) +" "+ y +" L "+ (x+30*factor) +" "+ y +" L "+ (x-5*factor) +" "+ (y-50*factor)]]);
  group.appendChild(el);
};

setAttributes = function(element, attrList) {
  for (var i = 0; i < attrList.length; i++)
    element.setAttributeNS(null, attrList[i][0], attrList[i][1]);
};

oa.view.fillLargeBoxesExtendAndReduce = function(ap) {
  var top = document.getElementById("topBox");
  var bottom = document.getElementById("bottomBox");
  
  // remove previous stickmanBoxes
  while (top.children.length > 0)
    top.removeChild(top.children[0]);
  while (bottom.children.length > 0)
    bottom.removeChild(bottom.children[0]);
  
  //upper destination-divs
  for (var i = 0; i < oa.view.fractionExtendAndReduceCountCorrect; i++ ){
    el = dom.createDiv("stickmanBox" + i, "stickmanBox largeMargins dashLine");
    oa.view.makeDropZoneExtendAndReduce(el, true); // make it a place to drop
    oa.view.makeEmptyDummy(el);
    top.appendChild(el);
  }
  
  // lower source-divs
  for (var i = 0; i < oa.view.fractionExtendAndReduceCountAll; i++ ){
    el = dom.createDiv(null, "stickmanBox smallMargins");
    el.appendChild(oa.view.createStickmanBox(i));
    bottom.appendChild(el);
  }
};

oa.view.makeDropZoneExtendAndReduce = function(el, cond) {
  if (cond) {
    el.addEventListener("dragover", oa.view.handleFractionExtendAndReduceDragOver, false); // activate dropping
    el.addEventListener("drop", oa.view.handleFractionExtendAndReduceDrop, false); // drop-id
    el.addEventListener("dragenter", oa.view.handleFractionExtendAndReduceDragIn, false); // gray
    el.addEventListener("dragleave", oa.view.handleFractionExtendAndReduceDragOut, false); //not gray
    el.classList.add("dashLine");
  } else {
    el.removeEventListener("dragover", oa.view.handleFractionExtendAndReduceDragOver, false);
    el.removeEventListener("drop", oa.view.handleFractionExtendAndReduceDrop, false);
    el.removeEventListener("dragenter", oa.view.handleFractionExtendAndReduceDragIn, false);
    el.removeEventListener("dragleave", oa.view.handleFractionExtendAndReduceDragOut, false);
    el.classList.remove("dashLine");
  }
};

oa.view.createStickmanBox = function(id) {
  // create a stickman
  var man = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  man.setAttributeNS(null, "version", "1.1");
  man.setAttributeNS(null, "width", 84);
  man.setAttributeNS(null, "height", 126);
  man.setAttributeNS(null, "id", "stickman"+id);
  addStickman(man, 42, 126, id);
  
  var el = dom.createDiv("drag" + id);
  el.setAttribute("draggable", "true");
  el.addEventListener("dragstart", oa.view.handleFractionExtendAndReduceDragStart, false); // id, transparent
  el.addEventListener("dragend", oa.view.handleFractionExtendAndReduceDragEnd, false); //remove transparent
  el.addEventListener("mousedown", oa.view.handleUserInputFractionExtendAndReduce, false); // remove green/red borders
  el.appendChild(man);
  return el;
};

oa.view.handleFractionExtendAndReduceDragStart = function(e) {
  e.target.style.opacity = "0.2";
  e.dataTransfer.setData("text", e.target.id);
};

oa.view.handleFractionExtendAndReduceDragEnd = function(e) {
  e.target.style.opacity = "1";
};

oa.view.handleFractionExtendAndReduceDragOver = function(e) {
  if (e.target.parentNode.classList.contains("stickmanBox"))
    e.preventDefault(); // enable dropping instead of default-browser-behavior
};

oa.view.handleFractionExtendAndReduceDrop = function(e) {
  var id, source, destination;
  // reset the destination - background
  e.target.parentNode.style.background = null;
  
  e.preventDefault();
  e.stopPropagation(); // stop redirecting.
  id = e.dataTransfer.getData("text");

  // get the source-parent
  source = document.getElementById(id).parentNode, // remember the size box to make it a drop-zone
  destination = e.target.parentNode; // parentNode to avoid getting the empty div
  
  destination.appendChild(document.getElementById(id));
  destination.removeChild(e.target); //remove empty-div
  oa.view.makeDropZoneExtendAndReduce(destination, false);
  
  // set up the new empty box
  oa.view.makeDropZoneExtendAndReduce(source, true);
  oa.view.makeEmptyDummy(source);
};

oa.view.handleFractionExtendAndReduceDragIn = function(e) {
  if (e.target.parentNode.classList.contains("stickmanBox"))
    e.target.parentNode.style.background = "#eee";
};

oa.view.handleFractionExtendAndReduceDragOut = function(e) {
  e.target.parentNode.style.background = null;
};

oa.view.waterAnimation = function() {
  var svg = document.getElementById("svgFractionBoat");
  if (svg) {
    var waves = document.getElementById("waterGroup");
    var x = parseInt(waves.getAttribute("x")) - 2;
    if (x <= 0)
      x = svg.getAttribute("width") / oa.view.waves;
    setAttributes(waves, [["x", x], ["transform", "translate("+ (x) +",0)"]]);
    setTimeout(oa.view.waterAnimation, 40);
  }
};

oa.view.stopCorrectAnimation = false;
oa.view.correctAnimation = function() {
  if (oa.view.stopCorrectAnimation)
    return;
  var svg = document.getElementById("svgFractionBoat");
  var boatGroup = document.getElementById("boatGroup");
  var stickmans = document.getElementById("passengers");
  var x = parseInt(boatGroup.getAttribute("x"));
  if (x == 5)
    for (var i = 0; i < oa.view.fractionExtendAndReduceCountCorrect; i++) {
      addHappyStickman(stickmans, i*145 + 155, 240, i);
      document.getElementById("stickmanBox"+i).style.visibility = "hidden";
    }
  
  if (x < svg.getAttribute("width")) {
    setAttributes(boatGroup, [["transform", "translate("+ (x+5) +",0)"], ["x", (x+5)]]);
    setTimeout(oa.view.correctAnimation, 40);
  }
};

/**
 * Event handler for clicking the "Enter"/"Continue" button
 */
oa.view.handleFractionExtendAndReduceSubmit = function(e) {
  var boxn = [],
      answer = [],
      answerPos = [],
      check = true,
      errors = [],
      correct = 0,
      dropPos = [];
  
  // get the divs
  for (var i = 0; i < oa.view.fractionExtendAndReduceCountCorrect; i++ )
    boxn.push(document.getElementById("stickmanBox" + i));
  
  // check if already solved
  if (e.target.innerHTML != "?") {  // click continue event
    for (var i = 0; i < oa.view.fractionExtendAndReduceCountCorrect; i++ )
      boxn[i].children[0].classList.remove("correct");
    e.target.innerHTML = "?";
    oa.view.stopCorrectAnimation = true;
    oa.view.fillLargeBoxesExtendAndReduce(oa.currentProblem);
    oa.ctrl.continueCurrentExercise();
  }
  else {
    
    for (var i = 0; i < oa.view.fractionExtendAndReduceCountCorrect; i++ ) {
      var num = "leer", denom = "leer"; // "leer" to get false case in evaluateFractionExtendAndReduce
      if (boxn[i].children[0].children.length > 0) { // check if destination box is not empty
        var dragId = boxn[i].children[0].id.substr(-1);
        num = parseInt(document.getElementById("numerator"+dragId).textContent);
        denom = parseInt(document.getElementById("denominator"+dragId).textContent);
        answerPos.push(dragId);
      } else {
        check = false;
        answerPos.push(null);
      }
      answer.push([num, denom]);
    }

    errors = oa.ctrl.rf.fractionExtendAndReduce.evaluate( answer);
    if (check) { // all dropzones filled
      if (!errors.length) {
        e.target.innerHTML = "►";
        oa.view.stopCorrectAnimation = false;
        oa.view.correctAnimation();  
      }
      else {
        for (var i = 0; i < errors.length; i++ )
          boxn[errors[i]].children[0].classList.add("false");
      }
    } else { // at least one field was not filled -> show the correct answer
      oa.view.fillLargeBoxesExtendAndReduce(oa.currentProblem); // reset the rf
      oa.view.rf.fractionExtendAndReduce.fill(oa.currentProblem); // fill in the numbers in original order
      
      // get the right number
      correct = oa.currentProblem.getCorrectAnswer();
      correct = correct[0] / correct[1];
      
      // all available drop positions
      for (var i = 0; i < oa.view.fractionExtendAndReduceCountCorrect; i++)
        dropPos.push(i);
      
      // find drop-elements with the correct numbers
      boxn = [];
      for (var i = 0; i < oa.view.fractionExtendAndReduceCountAll; i++) {
        var num = document.getElementById("numerator"+i).textContent,
            denom = document.getElementById("denominator"+i).textContent;
        if (num / denom === correct) {
          var dragElem = document.getElementById("drag"+i);
          var parent = dragElem.parentNode;
          // remove drag-element from lower box
          parent.removeChild(dragElem);
          // make lower box an empty dropzone
          oa.view.makeEmptyDummy(parent);
          oa.view.makeDropZoneExtendAndReduce(parent, true);
          
          // if this (correct) fraction was part of the answer, move it to its dropped position
          var pos = answerPos.indexOf(i);
          if (pos != undefined) {
            var box = document.getElementById("stickmanBox" + pos);
            box.removeChild(box.children[0]); // remove empty-div
            box.appendChild(dragElem); // add drag-div
            dropPos.splice(dropPos.indexOf(pos), 1); // remove this position from available list
            //box.classList.add("correct"); // mark as right
            oa.view.makeDropZoneExtendAndReduce(box, false); // disable as dropzone
          } else
            // otherwise remember it
            boxn.push(dragElem);
        }
      }
      
      // move up the remaining drag-elements to the remaining positions
      for (var i = 0; i < boxn.length; i++) {
        var box = document.getElementById("stickmanBox"+dropPos[i]);
        box.removeChild(box.children[0]); // remove empty-div
        box.appendChild(boxn[i]); // add drag-div
        boxn[i].classList.add("given"); // mark as given
        oa.view.makeDropZoneExtendAndReduce(box, false); // disable as dropzone
      }
      e.target.innerHTML = "►";
    }
  }
};
/**
 * Event handler for reseting the input field's class value on new user input 
 */
oa.view.handleUserInputFractionExtendAndReduce = function(e) {
  for (var i = 0; i < oa.view.fractionExtendAndReduceCountCorrect; i++ ) {
    var box = document.getElementById("stickmanBox" + i);
    box.children[0].classList.remove("false");
  }
};